<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				width: 100%;
				height: 100%;
			}
			
			body {
				background: url(../img/bg.jpg);
				background-size: cover;
				overflow: hidden;
			}
			
			img {
				width: 15px;
				height: 15px;
				position: absolute;
				display: block;
			}
		</style>
	</head>

	<body>
		<script src="../public.js"></script>
		<script>
			function FireWorm() {
				var that = this
				this.init = function() {
					this.createFireWorms()
					this.imgs = document.getElementsByTagName("img")
				}
				this.radom = function(a, b) {
					return parseInt(Math.random() * (b - a + 1) + a)
				}
				this.createFireWorms = function() {
					for(var i = 0; i < this.radom(40, 60); i++) {
						this.newWorm = document.createElement("img")
						this.newWorm.src = "../img/fire.jpg"
						document.body.appendChild(this.newWorm)
						this.newWorm.style.left = this.radom(0, document.documentElement.clientWidth - this.newWorm.offsetWidth) + "px"
						this.newWorm.style.top = this.radom(0, document.documentElement.clientHeight - this.newWorm.offsetHeight) + "px"
						this.move()
					}
				}
				this.move = function() {
					move(this.newWorm,{
						left:tool.ranNum(0,document.documentElement.clientWidth-this.newWorm.offsetWidth),
						top:tool.ranNum(0,document.documentElement.clientHeight-this.newWorm.offsetHeight)
					},function(){
						that.move();
					});
				
				}
			}
			new FireWorm().init()
		</script>
	</body>

</html>